<template>
  <view class="wallet-container" style="background-color: #f5f9ff; min-height: 100vh;">
    <!-- 标题栏 -->
    <view style="padding: 10px 20px;text-align: center;">
      <text style="font-size: 18px; font-weight: bold;">我的钱包</text>
    </view>

    <!-- 账户余额区域 -->
    <view style="background-color: #1a73e8; margin: 15px; border-radius: 12px; padding: 20px;">
      <view style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.2);">
        <view>
          <text style="font-size: 14px; color: rgba(255,255,255,0.9);">账户余额</text>
          <text style="font-size: 28px; font-weight: bold; color: #fff; display: block; margin-top: 5px;">3212.00</text>
        </view>
		<navigator
		     url="/pages/b/manager/04/withdraw_balance" 
		     style="font-size: 14px; color: #1a73e8; background-color: #55aaff; padding: 8px 15px; border-radius: 15px;"
		     hover-class="button-hover">
		     提现
		</navigator>
      </view>

      <view style="display: flex; justify-content: space-between; padding-top: 15px;">
        <view>
          <text style="font-size: 14px; color: rgba(255,255,255,0.9);">可提现金额</text>
          <text style="font-size: 18px; font-weight: bold; color: #fff; display: block; margin-top: 5px;">3000.00</text>
        </view>
        <view>
          <text style="font-size: 14px; color: rgba(255,255,255,0.9);">待结算金额</text>
          <text style="font-size: 18px; font-weight: bold; color: #fff; display: block; margin-top: 5px;">212.00</text>
        </view>
      </view>
    </view>

    <!-- 提现记录/规则选项卡（修改为纯跳转按钮） -->
    <view style="background-color: #55aaff; margin: 15px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
      <view style="display: flex;">
        <!-- 提现记录按钮 -->
        <navigator url="/pages/b/manager/04/payout_history" style="flex: 1; text-align: center; padding: 15px; position: relative;">
          <view style="display: flex; justify-content: center; align-items: center;">
            <!-- 信封图标 -->
            <view style="width: 20px; height: 20px; margin-right: 8px; position: relative;">
              <view style="width: 16px; height: 12px; border: 2px solid #8b8c87; border-radius: 2px; position: relative;">
                <view style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 10px; height: 6px; background-color: #1a73e8; border-radius: 2px 2px 0 0;"></view>
              </view>
              <text style="position: absolute; right: -4px; bottom: -4px; color: #8b8c87; font-size: 12px;">*</text>
            </view>
            <text style="font-weight: bold; color: #666;">提现记录</text>
          </view>
        </navigator>
        
        <!-- 分隔线 -->
        <view style="width: 1px; background-color: #eee;"></view>
        
        <!-- 提现规则按钮 -->
        <navigator url="/pages/b/manager/04/payout_rule" style="flex: 1; text-align: center; padding: 15px; position: relative;">
          <view style="display: flex; justify-content: center; align-items: center;">
            <!-- 规则图标 -->
            <view style="width: 20px; height: 20px; margin-right: 8px; position: relative;">
              <view style="width: 16px; height: 16px; border: 2px solid #666; border-radius: 50%; display: flex; justify-content: center; align-items: center;">
                <text style="color: #666; font-size: 12px; font-weight: bold;">!</text>
              </view>
            </view>
            <text style="color: #666;">提现规则</text>
          </view>
        </navigator>
      </view>
    </view>

    <!-- 账单明细 -->
    <view style="background-color: #fff; margin: 15px; border-radius: 12px; padding: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
      <view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <text style="font-size: 14px; color: #999;">| 账单明细</text>
        <text style="font-size: 16px; font-weight: bold; color: #333;">10月</text>
      </view>
      
      <view v-for="(item, index) in billList" :key="index" style="padding: 12px 0; border-bottom: 1px solid #f5f5f5;">
        <!-- 订单号 -->
        <text style="font-size: 14px; color: #000; display: block; margin-bottom: 8px;">{{item.orderId}}</text>
   
        <view style="display: flex;">
          <view style="flex: 1;">
            <text style="font-size: 12px; color: #999; display: block;">{{item.date}}</text>
            <text style="font-size: 12px; color: #999; display: block;">{{item.time}}</text>
          </view>
          
          <!-- 返利 -->
          <view style="flex: 1; text-align: center;">
            <text style="font-size: 16px; color: #07c160; font-weight: bold; display: block;">+{{item.rebate.toFixed(2)}}</text>
            <text style="font-size: 12px; color: #999; display: block;">返利</text>
          </view>
          
          <!-- 余额 -->
          <view style="flex: 1; text-align: right;">
            <text style="font-size: 16px; color: #07c160; font-weight: bold; display: block;">{{item.balance.toFixed(2)}}</text>
            <text style="font-size: 12px; color: #999; display: block;">余额</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      billList: [
        { 
          orderId: '订单-87297520848',
          date: '2023-10-03',
          time: '18:10:23',
          rebate: 100.00,
          balance: 300.00
        },
        { 
          orderId: '微信提现',
          date: '2023-10-03',
          time: '18:10:23',
          rebate: -1000.00,
          balance: 200.00
        },
        { 
          orderId: '订单-87297520848',
          date: '2023-10-03',
          time: '18:10:23',
          rebate: 100.00,
          balance: 1200.00
        },
        { 
          orderId: '订单-87297520848',
          date: '2023-10-03',
          time: '18:10:23',
          rebate: 100.00,
          balance: 1100.00
        },
        { 
          orderId: '订单-87297520848',
          date: '2023-10-03',
          time: '18:10:23',
          rebate: 100.00,
          balance: 1000.00
        }
      ]
    }
  }
}
</script>

<style>
.wallet-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
              Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>